<script setup>
import filters from '@/utils/filter'
import { getCouponsList } from '@/api/my'

// 响应式变量
const coponList = ref([])
const prompt = ref(false)
const reflesh = ref(false)
const deviceId = ref('')
const fromPage = ref('')

// 下拉加载
const upper = () => {
  console.log('Reached the top')
}

//上拉刷新
const lower = () => {
  console.log('Reached the bottom')
}

//获取优惠卷列表
const initData = async () => {
  try {
    const res = await getCouponsList(deviceId.value)
    if (!res) {
      return
    }
    const listData = res.data
    if (listData.length == 0) {
      prompt.value = true
    }
    for (let i = 0; i < listData.length; i++) {
      const startTime = new Date(listData[i].expiration_date_start).getTime()
      const endTime = new Date(listData[i].expiration_date_end).getTime()
      if (endTime < new Date().getTime()) {
        listData[i].use = '已过期'
        listData[i].sty = 'grayscale'
      } else {
        if (listData[i].is_usg_status) {
          listData[i].use = '不可使用'
          listData[i].sty = 'grayscale'
        } else {
          listData[i].use = '可使用'
          listData[i].sty = ''
        }
      }
    }
    coponList.value = listData
  } catch (error) {
    console.error(error)
  }
}

//优惠卷有效期设置
const toTimeByDay = (value) => {
  return filters.toTimeByDay(value)
}

//rentRule页面获取优惠卷
const chooseCoupon = (item) => {
  if (fromPage.value === 'rentRule') {
    uni.setStorageSync('couponRecoreId', item.id)
    uni.setStorageSync('couponRecoreTime', item.discount_time)
    uni.redirectTo({
      url: `/pages/rentRule/rentRule?deviceId=${deviceId.value}`
    })
  } else {
    uni.showToast({
      title: '无法选择优惠券',
      icon: 'none'
    })
  }
}

/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  deviceId.value = options.deviceId
  fromPage.value = options.from || '' // 处理传递的from参数
  initData()
})
</script>

<template>
  <view class="container">
    <scroll-view scroll-y @scrolltoupper="upper" @scrolltolower="lower">
      <view v-if="prompt && !reflesh" style="margin-top: 40rpx; font-size: 36rpx; text-align: center">暂无数据哦!</view>
      <template v-else>
        <view v-for="item in coponList" :key="item.id">
          <view class="copon">
            <view :class="['back', item.sty]" :style="{
              background: `url('/static/images/icon_copon_background.png') no-repeat center center / cover`}" @click="chooseCoupon(item)">
              <view class="time">
                <view class="text_1">{{ item.discount_time / 60 }}</view>
                <view class="text_2">小时</view>
              </view>
              <view class="parameter">
                <view class="text_3">{{ item.name }}</view>
                <view class="text_4">适用范围: {{ item.available }}</view>
                <view class="text_5">有效期: {{ toTimeByDay(item.expiration_date_end) }} - {{
                  toTimeByDay(item.expiration_date_start) }}</view>
              </view>
              <view class="count">x{{ item.taken_count - item.used_count }}</view>
            </view>
          </view>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<style lang="scss">
// 定义变量
$light-color: #ececec;
$primary-color: #2185f5;
$font-color-dark: rgba(32, 32, 32, 1);
$font-color-light: rgba(114, 114, 114, 1);
$border-color: #dddddd;

// 页面样式
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light-color;
}

.container {
  padding: 10rpx 0;

  .copon {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;

    .back {
      display: flex;
      align-items: center;
      width: 700rpx;
      height: 210rpx;
      background-size: cover;

      .time {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 220rpx;

        .text_1 {
          font-size: 80rpx;
          font-weight: bold;
          color: rgba(254, 96, 15, 1);
        }

        .text_2 {
          font-size: 30rpx;
          color: $font-color-dark;
        }
      }

      .parameter {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 500rpx;
        height: 108rpx;
        border-left: 1rpx dashed $border-color;

        .text_3 {
          margin-left: 20rpx;
          font-size: 30rpx;
          font-weight: bold;
          color: $font-color-dark;
          line-height: 20rpx;
        }

        .text_4,
        .text_5 {
          margin-left: 20rpx;
          font-size: 22rpx;
          font-weight: 500;
        }

        .text_4 {
          line-height: 20rpx;
          color: $font-color-dark;
        }

        .text_5 {
          color: $font-color-light;
        }
      }

      .count {
        font-size: 28rpx;
        font-weight: bold;
        color: rgba(254, 96, 15, 1);
        margin: 0 40rpx 120rpx 50rpx;
      }
    }
  }
}
</style>
